const { resolve } = require("path"); // node内置核心模块，用来设置路径。
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');  //引入生成HTML文件的插件
const ESLintPlugin = require('eslint-webpack-plugin')
const CopyWebpackPlugin = require("copy-webpack-plugin")
module.exports = {
    //打包模式
    mode: "production", //还有development模式
    //入口文件
    entry: "./src/index.js",
    //出口文件
    output: {
        path: resolve(__dirname, "../build"),
        filename: "./js/bundle.js"
    },
    //模块配置，配置loader(加载器)
    module: {
        rules: [{
            test: /\.css$/i,
            // use里面是个数组的话 按照从后往前的顺序进行加载
            // use: [
            //     //use中loader加载是有顺序的，先下后上，注意有的loader需要按照顺序书写
            //     "style-loader",
            //     'css-loader'
            // ]
            use: [
                //use中loader加载是有顺序的，先下后上，注意有的loader需要按照顺序书写
                MiniCssExtractPlugin.loader,
                'css-loader'
            ]
        },
        {
            test: /\.less$/i,
            // use: ["style-loader", 'css-loader', 'less-loader']
            use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            // less-loader 只是让webpack认识less 但是不能让less转换成css 所以还要下载less安装包
        },
        {
            test: /\.(png|jpg|gif|webp)$/,
            //asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。代替之前的url-loader和file-loader
            type: "asset",
            parser: {
                dataUrlCondition: {
                    maxSize: 20 * 1024, // 小于20kb以下的图片会被打包成base64格式
                },
            },
            generator: {
                filename: 'images/[name][ext]'   // 大于20kb以上的图片设置
            }
        },
        // {
        //     test: /\.(htm|html)$/i,
        //     use: {
        //         loader: 'html-loader'
        //     }
        // }
    ]
    },

    // 优化配置
    optimization: {
        minimizer: [
            new CssMinimizerPlugin(),
        ],
        // minimize: true,
    },

    //插件配置
    plugins: [new MiniCssExtractPlugin({
        //输出独立文件的文件名
        filename: 'css/index.css'
    }),
    new HtmlWebpackPlugin({
        filename: "index.html",
        template: "./public/index.html"    //以什么文件为模板 后面是模板的路径
    }),
    new ESLintPlugin({
        fix: true
    }),
    new CopyWebpackPlugin({
        patterns: [{
            from: "./public",
            to: "public",
            //配置复制时忽略的文件
            globOptions: {
                ignore: ["**/index.html"]
            }
        }],
    }),
    ]
}